<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>哔哩哔哩漫画 - bilibili 正版漫画平台</title>
    <meta
      name="description"
      content="哔哩哔哩正版漫画阅读平台, 海量官方漫画连载在线观看, 二次元动漫迷的追漫神器, 热门漫画: 海贼王, 五等分的新娘, 约定的梦幻岛, 辉夜大小姐想让我告白 ~天才们的恋爱头脑战~, 关于我转生变成史莱姆这档事, 我的英雄学园, 修真聊天群, 乔乔的奇妙冒险, 斗罗大陆, 我家大师兄脑子有坑, 一拳超人, 灵能百分百, 铳梦等"
    />
    <meta
      name="keywords"
      content="Bilibili,哔哩哔哩,哔哩哔哩动画,哔哩哔哩弹幕网,弹幕视频,B站,弹幕,字幕,AMV,MAD,MTV,ANIME,动漫,动漫音乐,游戏,游戏解说,二次元,游戏视频,ACG,galgame,动画,番组,新番,初音,洛天依,vocaloid,日本动漫,国产动漫,手机游戏,网络游戏,电子竞技,ACG燃曲,ACG神曲,追新番,新番动漫,新番吐槽,巡音,镜音双子,千本樱,初音MIKU,舞蹈MMD,MIKUMIKUDANCE,洛天依原创曲,洛天依翻唱曲,洛天依投食歌,洛天依MMD,vocaloid家族,OST,BGM,动漫歌曲,日本动漫音乐,宫崎骏动漫音乐,动漫音乐推荐,燃系mad,治愈系mad,MAD MOVIE,MAD高燃"
    />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./font/iconfont.css" />
    <link rel="stylesheet" href="./css/inputStyle.css" />
  </head>

  <body>
    <!-- 顶部 shortcut -->
    <nav class="shortcut">
      <div class="container">
        <!-- logo -->
        <h1>
          <a href="#">
            <img src="./images/logo.png" alt="" />
            <span>哔哩哔哩漫画</span>
          </a>
        </h1>
        <!-- 顶部小导航 top_nav -->
        <div class="top_nav">
          <ul>
            <li>
              <a href="#"> <img src="./images/bilibili.png" alt="bilibili~小电视" />主站 </a>
            </li>
            <li class="active">
              <a href="#" class="blue">首页<span></span></a>
            </li>
            <li><a href="#">分类</a></li>
            <li><a href="#">更新</a></li>
            <li><a href="#">排行榜</a></li>
          </ul>
        </div>
        <!-- 右侧 -->
        <div class="right_part">
          <div class="search_bar">
            <div id="app">
              <label
                :data-before="before"
                :data-after="after"
                :class="{animate: shouldAnimate}"
                @animationend="animationEnded"
              >
                <input
                  type="text"
                  :placeholder="placeholder"
                  @focus="isFocusing = true"
                  @blur="isFocusing = false"
                  @keydown="doSearch"
                />
              </label>
              <button class="iconfont icon-41"></button>
            </div>
          </div>
          <!-- <label :data-before="before" :data-after="after" :class="{animate: shouldAnimate}" @animationend="animationEnded">
            <input type="text" :placeholder="placeholder" @focus="isFocusing = true" @blur="isFocusing = false" @keydown="doSearch">
          </label> -->
          <div class="download_app">
            <button>下载 APP</button>
          </div>
          <div class="user_history panel">
            <a href="#">历史</a>
          </div>
          <div class="user_catch panel">
            <a href="#">追漫</a>
          </div>
          <div class="user_avatar panel"></div>
        </div>
      </div>
    </nav>

    <!-- 轮播图 -->
    <div class="banner">
      <ul>
        <li>
          <a href=""> <img src="./uploads/banner_01.jpg" alt="" /></a>
        </li>
        <li>
          <a href=""> <img src="./uploads/banner_02.jpg" alt="" /></a>
        </li>
        <li>
          <a href=""> <img src="./uploads/banner_03.jpg" alt="" /></a>
        </li>
      </ul>
      <div class="mask_left"></div>
      <div class="mask_right"></div>
      <div class="container">
        <button class="arrow_left iconfont icon-xiangzuojiantou"></button>
        <button class="arrow_right iconfont icon-xiangyoujiantou"></button>
      </div>
    </div>

    <!-- 主导航 main_nav -->
    <div class="main_nav">
      <div class="container">
        <a href="#">热血</a>
        <a href="#">古风</a>
        <a href="#">玄幻</a>
        <a href="#">奇幻</a>
        <a href="#">悬疑</a>
        <a href="#">都市</a>
        <a href="#">历史</a>
        <a href="#">武侠</a>
        <a href="#">游戏竞技</a>
        <a href="#">灵异</a>
        <a href="#">架空</a>
        <a href="#">青春</a>
        <a href="#">西幻</a>
        <a href="#">现代</a>
        <a href="#">全部></a>
      </div>
    </div>

    <!-- 推荐模块 recommend -->
    <div class="recommend container">
      <div class="title clearfix">
        <h2>为你推荐</h2>
        <a href="#">
          <span class="iconfont icon-31shuaxin"></span>
          换一批
        </a>
      </div>
      <div class="content">
        <ul class="clearfix">
          <li>
            <a href="#">
              <img src="./uploads/recommend_01.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_02.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_03.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_04.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_05.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_06.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_07.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_08.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_09.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_10.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_11.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_12.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 热门速递 hot -->
    <div class="recommend container hot">
      <div class="title clearfix">
        <h2>热门速递</h2>
        <ul>
          <li class="active">
            <a href="#" class="blue">
              二次元养老院
              <span></span>
            </a>
          </li>
          <li><a href="#">9.0分以上佳作精选</a></li>
        </ul>
        <a href="#">
          <span class="iconfont icon-31shuaxin"></span>
          换一批
        </a>
      </div>
      <div class="content">
        <ul class="clearfix">
          <li>
            <a href="#">
              <img src="./uploads/hot_01.png" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/hot_02.png" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/hot_03.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/hot_04.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/hot_05.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/hot_06.png" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/hot_07.png" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/hot_08.png" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>蓝翅还是归类为生活漫画，故事后续发展除了人物角色的爱情亲情成</p>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 都市生活 -->
    <div class="recommend container">
      <div class="title clearfix">
        <h2>都市生活</h2>
        <a href="#">
          更多
          <span class="iconfont icon-xiangyoujiantou"></span>
        </a>
      </div>
      <div class="content">
        <ul class="clearfix">
          <li>
            <a href="#">
              <img src="./uploads/recommend_01.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_02.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_03.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_04.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_05.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_06.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 奇幻世界 -->
    <div class="recommend container">
      <div class="title clearfix">
        <h2>奇幻世界</h2>
        <a href="#">
          更多
          <span class="iconfont icon-xiangyoujiantou"></span>
        </a>
      </div>
      <div class="content">
        <ul class="clearfix">
          <li>
            <a href="#">
              <img src="./uploads/recommend_01.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_02.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_03.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_04.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_05.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_06.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 古风恋爱 -->
    <div class="recommend container">
      <div class="title clearfix">
        <h2>古风恋爱</h2>
        <a href="#">
          更多
          <span class="iconfont icon-xiangyoujiantou"></span>
        </a>
      </div>
      <div class="content">
        <ul class="clearfix">
          <li>
            <a href="#">
              <img src="./uploads/recommend_01.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_02.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_03.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_04.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_05.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="./uploads/recommend_06.jpg" alt="" />
              <h4>我犊子道木我犊子道木我犊子道木我犊子道木</h4>
              <p>都市</p>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 底部模块 footer -->
    <footer>
      <div class="container clearfix">
        <div class="row_one">
          <div class="left_part fl">
            <div class="footer_logo fl">
              <img src="./images/logo.png" alt="" />
              <span>哔哩哔哩漫画</span>
            </div>
            <div class="url_links fl">
              <a href="#" class="fl">关于我们</a>
              <a href="#" class="fl">联系我们</a>
              <a href="#" class="fl">友情链接</a>
              <a href="#" class="fl">加入我们</a>
            </div>
          </div>
          <div class="line_between fl"></div>
          <div class="right_part fl">
            <a href="#">
              <img src="./images/官方号.jpg" alt="" />
              <p>B站官号</p>
            </a>
            <a href="#">
              <img src="./images/官方号.jpg" alt="" />
              <p>B站官号</p>
            </a>
            <a href="#">
              <img src="./images/官方号.jpg" alt="" />
              <p>B站官号</p>
            </a>
          </div>
        </div>
        <div class="row_two"></div>
      </div>
    </footer>
  </body>

  <!-- vue的CDN资源引入 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

  <!-- 输入框滚动效果 -->
  <script src="./js/searchScroll.js"></script>
</html>
